<template>
  <div>
    <div class="bg-white flex">
      <LayoutBreadcrumb class="grow" />
    </div>

    <div class="mt-2 bg-white">
      <a-steps v-model:current="current" type="navigation" size="small">
        <a-step disabled title="设置基本信息" />
        <a-step disabled title="设置位置信息" />
        <a-step disabled title="设置监控信息" />
        <!-- <a-step disabled title="设置健康分析" /> -->
      </a-steps>
    </div>

    <div class="mt-2 bg-white pt-8">
      <this-step0 ref="s0" v-show="current === 0" @next="forward" />

      <this-step1
        ref="s1"
        v-show="current === 1"
        class="w-full pb-16"
        @next="forward"
        @back="back"
      />
      <this-step2
        ref="s2"
        v-show="current === 2"
        class="w-full pb-16"
        @next="forward"
        @back="back"
      />
      <this-result v-show="current === 3" class="w-full pb-16" @again="current = 0" />
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, nextTick } from 'vue';
import { LayoutBreadcrumb } from '../../layouts/default/header/components';
import { ref } from 'vue';
import thisStep0 from './form/step0.vue';
import thisStep1 from './form/step1.vue';
import thisStep2 from './form/step2.vue';
import thisResult from './form/result.vue';
import { defHttp } from '/@/utils/http/axios';
import { useRoute } from 'vue-router';

export default defineComponent({
  components: { LayoutBreadcrumb, thisStep0, thisStep1, thisStep2, thisResult },
  setup() {
    const route = useRoute();
    const s0 = ref();
    const s1 = ref();
    const s2 = ref();
    let form = {};
    const current = ref(0);

    function forward(data) {
      form = {
        ...form,
        ...data,
      };
      if (current.value === 2) {
        defHttp.post({ url: '/project/update', params: form }).then((res) => {
          current.value++;
        });
      } else {
        current.value++;
      }
      if (current.value === 1) {
        nextTick(() => {
          s1.value.onSearch(form.address);
        });
      }
      console.log(form);
    }
    function back() {
      current.value--;
    }

    function getProject(id) {
      defHttp.get({ url: '/project/get-by-id', params: { id } }).then((res) => {
        form = {
          id: res.data.id,
          logo: res.data.logo,
          structId: res.data.structId,
          name: res.data.name,
          address: res.data.address,
          lon: res.data.lon,
          lat: res.data.lat,
          comment: res.data.comment,
          typeId: res.data.typeId,
        };
        s0.value.setForm(form);
        s1.value.setForm(form);
      });
    }
    getProject(route.params.id);

    return {
      current,
      forward,
      back,
      s0,
      s1,
      s2,
    };
  },
});
</script>
  